<script setup lang="ts">
import {onMounted} from 'vue';
import {Divider, message} from "ant-design-vue";

import {useForm} from '#/ui-kit';
import {useUserStore} from '#/stores';
import {findUserInfo, updateBasicUserInfo} from '#/api/system/user';

const userStore = useUserStore();

const [Form, formApi] = useForm({
  layout: 'horizontal',
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  wrapperClass: 'grid grid-rows-4 grid-flow-col',
  actionLayout: 'newLine',
  actionPosition: 'left',
  resetButtonOptions: {show: false},
  submitButtonOptions: {content: '基本信息更改'},
  schema: [
    {
      label: '用户账号',
      fieldName: 'username',
      component: 'Input',
      componentProps: {
        disabled: true
      },
      formItemClass: 'col-start-1',
    },
    {
      label: '用户姓名',
      fieldName: 'nickname',
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '请输入用户姓名'
      },
      rules: 'required',
      formItemClass: 'col-start-1',
    },
    {
      label: '邮箱地址',
      fieldName: 'email',
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '请输入邮箱地址'
      },
      formItemClass: 'col-start-1',
    },
    {
      fieldName: 'avatar',
      component: 'CropperAvatar',
      formItemClass: 'col-start-2 row-span-4'
    },
  ],
  handleSubmit: (values) => {
    updateBasicUserInfo(values).then(() => {
      message.success('基本信息更改成功');
      values.userId = values?.id;
      userStore.setUserInfo(values);
    });
  },
});

onMounted(() => {
  let userId = userStore?.userInfo?.userId;
  findUserInfo(userId).then(res => {
    formApi.setValues(res, false, false);
  });
});
</script>

<template>
  <header class="h-[38px] leading-[38px] text-sm font-medium">基本信息</header>
  <Divider class="m-0"/>
  <Form class="pt-2 pr-2"/>
</template>